Bootstrap - Baralho - Card Deck
A classe .card-deck cria uma grade de altura e largura iguais .
O layout será ajustado automaticamente à medida que você insere mais cartões.
Neste exemplo, adicionamos conteúdo extra ao primeiro cartão, para torná-lo mais alto.
Observe como os outros cartões seguem.
Nota: Os cartões são exibidos verticalmente em telas pequenas (menos de 576px):
Algum texto dentro do primeiro cartão
Mais texto para aumentar a altura
Mais texto para aumentar a altura
Mais texto para aumentar a altura
Algum texto dentro do segundo cartão
Algum texto dentro do terceiro cartão
Algum texto dentro do quarto cartão
Código da página
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-light mb-4" style="background-color:aqua">
<div class="container">
<div class="navbar-brand mb-0 h1">
<h3>Bootstrap - Baralho - Card Deck</h3>
</div>
</div>
</nav>
<div style="padding-left:5px" class="container">
<p>A classe .card-deck cria uma grade <strong> de altura e largura iguais </strong>. O layout será ajustado automaticamente à medida que você insere mais cartões.</p>
<p>Neste exemplo, adicionamos conteúdo extra ao primeiro cartão, para torná-lo mais alto. Observe como os outros cartões seguem.</p>
<p><strong>Nota:</strong> Os cartões são exibidos verticalmente em telas pequenas (menos de 576px):</p>
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Algum texto dentro do primeiro cartão</p>
<p class="card-text">Mais texto para aumentar a altura</p>
<p class="card-text">Mais texto para aumentar a altura</p>
<p class="card-text">Mais texto para aumentar a altura</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Algum texto dentro do segundo cartão</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Algum texto dentro do terceiro cartão</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Algum texto dentro do quarto cartão</p>
</div>
</div>
</div>
</div>